<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Component Protocol Reference</title>
    <link rel="stylesheet" type="text/css" href="../css/jazzy.css" />
    <link rel="stylesheet" type="text/css" href="../css/highlight.css" />
    <meta charset="utf-8">
    <script src="../js/jquery.min.js" defer></script>
    <script src="../js/jazzy.js" defer></script>
    
    <script src="../js/lunr.min.js" defer></script>
    <script src="../js/typeahead.jquery.js" defer></script>
    <script src="../js/jazzy.search.js" defer></script>
  </head>
  <body>

    <a name="//apple_ref/swift/Protocol/Component" class="dashAnchor"></a>

    <a title="Component Protocol Reference"></a>

    <header class="header">
      <p class="header-col header-col--primary">
        <a class="header-link" href="../index.html">
          Carbon Docs
        </a>
         (100% documented)
      </p>
    
      <p class="header-col--secondary">
        <form role="search" action="../search.json">
          <input type="text" placeholder="Search documentation" data-typeahead>
        </form>
      </p>
    
        <p class="header-col header-col--secondary">
          <a class="header-link" href="https://github.com/ra1028/Carbon">
            <img class="header-icon" src="../img/gh.png"/>
            View on GitHub
          </a>
        </p>
    
    </header>

    <p class="breadcrumbs">
      <a class="breadcrumb" href="../index.html">Carbon Reference</a>
      <img class="carat" src="../img/carat.png" />
      Component Protocol Reference
    </p>

    <div class="content-wrapper">
      <nav class="navigation">
        <ul class="nav-groups">
          <li class="nav-group-name">
            <a class="nav-group-name-link" href="../Element.html">Element</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Protocols/Component.html">Component</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Protocols/IdentifiableComponent.html">IdentifiableComponent</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Structs/AnyComponent.html">AnyComponent</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Structs/Section.html">Section</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Structs/Group.html">Group</a>
              </li>
            </ul>
          </li>
          <li class="nav-group-name">
            <a class="nav-group-name-link" href="../ComponentWrapper.html">ComponentWrapper</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Structs/IdentifiedComponentWrapper.html">IdentifiedComponentWrapper</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Protocols/ComponentWrapping.html">ComponentWrapping</a>
              </li>
            </ul>
          </li>
          <li class="nav-group-name">
            <a class="nav-group-name-link" href="../Node.html">Node</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Structs/CellNode.html">CellNode</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Structs/ViewNode.html">ViewNode</a>
              </li>
            </ul>
          </li>
          <li class="nav-group-name">
            <a class="nav-group-name-link" href="../Renderer.html">Renderer</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Classes/Renderer.html">Renderer</a>
              </li>
            </ul>
          </li>
          <li class="nav-group-name">
            <a class="nav-group-name-link" href="../Adapter.html">Adapter</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Protocols/Adapter.html">Adapter</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Classes/UITableViewAdapter.html">UITableViewAdapter</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Classes/UITableViewAdapter/CellRegistration.html">– CellRegistration</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Classes/UITableViewAdapter/ViewRegistration.html">– ViewRegistration</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Classes/UITableViewAdapter/SelectionContext.html">– SelectionContext</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Classes/UICollectionViewAdapter.html">UICollectionViewAdapter</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Classes/UICollectionViewAdapter/CellRegistration.html">– CellRegistration</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Classes/UICollectionViewAdapter/ViewRegistration.html">– ViewRegistration</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Classes/UICollectionViewAdapter/SelectionContext.html">– SelectionContext</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Classes/UICollectionViewFlowLayoutAdapter.html">UICollectionViewFlowLayoutAdapter</a>
              </li>
            </ul>
          </li>
          <li class="nav-group-name">
            <a class="nav-group-name-link" href="../Updater.html">Updater</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Protocols/Updater.html">Updater</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Classes/UITableViewUpdater.html">UITableViewUpdater</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Classes/UITableViewReloadDataUpdater.html">UITableViewReloadDataUpdater</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Classes/UICollectionViewUpdater.html">UICollectionViewUpdater</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Classes/UICollectionViewReloadDataUpdater.html">UICollectionViewReloadDataUpdater</a>
              </li>
            </ul>
          </li>
          <li class="nav-group-name">
            <a class="nav-group-name-link" href="../Interface.html">Interface</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Protocols/ComponentRenderable.html">ComponentRenderable</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Classes/UITableViewComponentCell.html">UITableViewComponentCell</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Classes/UITableViewComponentHeaderFooterView.html">UITableViewComponentHeaderFooterView</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Classes/UICollectionViewComponentCell.html">UICollectionViewComponentCell</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Classes/UICollectionComponentReusableView.html">UICollectionComponentReusableView</a>
              </li>
            </ul>
          </li>
          <li class="nav-group-name">
            <a class="nav-group-name-link" href="../Builder.html">Builder</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Structs/CellsBuilder.html">CellsBuilder</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Structs/SectionsBuilder.html">SectionsBuilder</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Protocols/CellsBuildable.html">CellsBuildable</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Protocols/SectionsBuildable.html">SectionsBuildable</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Extensions/Optional.html">Optional</a>
              </li>
            </ul>
          </li>
          <li class="nav-group-name">
            <a class="nav-group-name-link" href="../Changeset.html">Changeset</a>
            <ul class="nav-group-tasks">
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Changeset.html#/s:6Carbon13DataChangeseta">DataChangeset</a>
              </li>
              <li class="nav-group-task">
                <a class="nav-group-task-link" href="../Changeset.html#/s:6Carbon19StagedDataChangeseta">StagedDataChangeset</a>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
      <article class="main-content">

        <section class="section">
          <div class="section-content">
            <h1>Component</h1>
              <div class="declaration">
                <div class="language">
                  <pre class="highlight swift"><code><span class="kd">public</span> <span class="kd">protocol</span> <span class="kt">Component</span></code></pre>

                </div>
              </div>
            <p>A component represents a small reusable piece of code of element to be rendered.
This behaves as all elements of UIKit&rsquo;s UITableView and UICollectionView, and can
be easily support SwiftUI by used in conjunction with the <code>View</code> protocol.</p>

<p>Example for the simple component:</p>
<pre class="highlight swift"><code><span class="kd">struct</span> <span class="kt">Label</span><span class="p">:</span> <span class="kt">Component</span> <span class="p">{</span>
    <span class="k">var</span> <span class="nv">text</span><span class="p">:</span> <span class="kt">String</span>

    <span class="nf">init</span><span class="p">(</span><span class="n">_</span> <span class="nv">text</span><span class="p">:</span> <span class="kt">String</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">self</span><span class="o">.</span><span class="n">text</span> <span class="o">=</span> <span class="n">text</span>
    <span class="p">}</span>

    <span class="kd">func</span> <span class="nf">renderContent</span><span class="p">()</span> <span class="o">-&gt;</span> <span class="kt">UILabel</span> <span class="p">{</span>
        <span class="k">return</span> <span class="kt">UILabel</span><span class="p">()</span>
    <span class="p">}</span>

    <span class="kd">func</span> <span class="nf">render</span><span class="p">(</span><span class="k">in</span> <span class="nv">content</span><span class="p">:</span> <span class="kt">UILabel</span><span class="p">)</span> <span class="p">{</span>
        <span class="n">content</span><span class="o">.</span><span class="n">text</span> <span class="o">=</span> <span class="n">text</span>
    <span class="p">}</span>
<span class="p">}</span>
</code></pre>

<p>Example for use with SwiftUI:</p>
<pre class="highlight swift"><code><span class="kd">extension</span> <span class="kt">Label</span><span class="p">:</span> <span class="kt">View</span> <span class="p">{}</span>

<span class="kd">struct</span> <span class="kt">ContentView</span><span class="p">:</span> <span class="kt">View</span> <span class="p">{</span>
    <span class="k">var</span> <span class="nv">body</span><span class="p">:</span> <span class="n">some</span> <span class="kt">View</span> <span class="p">{</span>
        <span class="kt">VStack</span> <span class="p">{</span>
            <span class="kt">Text</span><span class="p">(</span><span class="s">"This is SwiftUI view"</span><span class="p">)</span>
            <span class="kt">Label</span><span class="p">(</span><span class="s">"This is Carbon component"</span><span class="p">)</span>
        <span class="p">}</span>
    <span class="p">}</span>
<span class="p">}</span>
</code></pre>

          </div>
        </section>

        <section class="section">
          <div class="section-content">
            <div class="task-group">
              <ul class="item-container">
                <li class="item">
                  <div>
                    <code>
                    <a name="/s:6Carbon9ComponentP7ContentQa"></a>
                    <a name="//apple_ref/swift/Alias/Content" class="dashAnchor"></a>
                    <a class="token" href="#/s:6Carbon9ComponentP7ContentQa">Content</a>
                    </code>
                  </div>
                  <div class="height-container">
                    <div class="pointer-container"></div>
                    <section class="section">
                      <div class="pointer"></div>
                      <div class="abstract">
                        <p>A type that represents a content to be render on the element of list UI.</p>

                      </div>
                      <div class="declaration">
                        <h4>Declaration</h4>
                        <div class="language">
                          <p class="aside-title">Swift</p>
                          <pre class="highlight swift"><code><span class="kd">associatedtype</span> <span class="kt">Content</span></code></pre>

                        </div>
                      </div>
                    </section>
                  </div>
                </li>
              </ul>
            </div>
            <div class="task-group">
              <div class="task-name-container">
                <a name="/Rendering%20-%20required"></a>
                <a name="//apple_ref/swift/Section/Rendering - required" class="dashAnchor"></a>
                <a href="#/Rendering%20-%20required">
                  <h3 class="section-name">Rendering - required</h3>
                </a>
              </div>
              <ul class="item-container">
                <li class="item">
                  <div>
                    <code>
                    <a name="/s:6Carbon9ComponentP13renderContent0D0QzyF"></a>
                    <a name="//apple_ref/swift/Method/renderContent()" class="dashAnchor"></a>
                    <a class="token" href="#/s:6Carbon9ComponentP13renderContent0D0QzyF">renderContent()</a>
                    </code>
                  </div>
                  <div class="height-container">
                    <div class="pointer-container"></div>
                    <section class="section">
                      <div class="pointer"></div>
                      <div class="abstract">
                        <p>Returns a new instance of <code><a href="../Protocols/Component.html#/s:6Carbon9ComponentP7ContentQa">Content</a></code>.</p>

                      </div>
                      <div class="declaration">
                        <h4>Declaration</h4>
                        <div class="language">
                          <p class="aside-title">Swift</p>
                          <pre class="highlight swift"><code><span class="kd">func</span> <span class="nf">renderContent</span><span class="p">()</span> <span class="o">-&gt;</span> <span class="kt"><a href="../Protocols/Component.html#/s:6Carbon9ComponentP7ContentQa">Content</a></span></code></pre>

                        </div>
                      </div>
                      <div>
                        <h4>Return Value</h4>
                        <p>A new <code><a href="../Protocols/Component.html#/s:6Carbon9ComponentP7ContentQa">Content</a></code> instance.</p>
                      </div>
                    </section>
                  </div>
                </li>
                <li class="item">
                  <div>
                    <code>
                    <a name="/s:6Carbon9ComponentP6render2iny7ContentQz_tF"></a>
                    <a name="//apple_ref/swift/Method/render(in:)" class="dashAnchor"></a>
                    <a class="token" href="#/s:6Carbon9ComponentP6render2iny7ContentQz_tF">render(in:)</a>
                    </code>
                  </div>
                  <div class="height-container">
                    <div class="pointer-container"></div>
                    <section class="section">
                      <div class="pointer"></div>
                      <div class="abstract">
                        <p>Render properties into the content.</p>

                      </div>
                      <div class="declaration">
                        <h4>Declaration</h4>
                        <div class="language">
                          <p class="aside-title">Swift</p>
                          <pre class="highlight swift"><code><span class="kd">func</span> <span class="nf">render</span><span class="p">(</span><span class="k">in</span> <span class="nv">content</span><span class="p">:</span> <span class="kt"><a href="../Protocols/Component.html#/s:6Carbon9ComponentP7ContentQa">Content</a></span><span class="p">)</span></code></pre>

                        </div>
                      </div>
                    </section>
                  </div>
                </li>
              </ul>
            </div>
            <div class="task-group">
              <div class="task-name-container">
                <a name="/Rendering%20-%20optional"></a>
                <a name="//apple_ref/swift/Section/Rendering - optional" class="dashAnchor"></a>
                <a href="#/Rendering%20-%20optional">
                  <h3 class="section-name">Rendering - optional</h3>
                </a>
              </div>
              <ul class="item-container">
                <li class="item">
                  <div>
                    <code>
                    <a name="/s:6Carbon9ComponentP15reuseIdentifierSSvp"></a>
                    <a name="//apple_ref/swift/Property/reuseIdentifier" class="dashAnchor"></a>
                    <a class="token" href="#/s:6Carbon9ComponentP15reuseIdentifierSSvp">reuseIdentifier</a>
                    </code>
                      <span class="declaration-note">
                        Default implementation
                      </span>
                  </div>
                  <div class="height-container">
                    <div class="pointer-container"></div>
                    <section class="section">
                      <div class="pointer"></div>
                      <div class="abstract">
                        <p>A string used to identify a element that is reusable. Default is the type name of <code>self</code>.</p>

                      </div>
                      <h4>Default Implementation</h4>
                      <div class="default_impl abstract">
                        <p>A string used to identify a element that is reusable. Default is the type name of <code>self</code>.</p>

                      </div>
                      <div class="declaration">
                        <h4>Declaration</h4>
                        <div class="language">
                          <p class="aside-title">Swift</p>
                          <pre class="highlight swift"><code><span class="k">var</span> <span class="nv">reuseIdentifier</span><span class="p">:</span> <span class="kt">String</span> <span class="p">{</span> <span class="k">get</span> <span class="p">}</span></code></pre>

                        </div>
                      </div>
                    </section>
                  </div>
                </li>
                <li class="item">
                  <div>
                    <code>
                    <a name="/s:6Carbon9ComponentP13referenceSize2inSo6CGSizeVSgSo6CGRectV_tF"></a>
                    <a name="//apple_ref/swift/Method/referenceSize(in:)" class="dashAnchor"></a>
                    <a class="token" href="#/s:6Carbon9ComponentP13referenceSize2inSo6CGSizeVSgSo6CGRectV_tF">referenceSize(in:)</a>
                    </code>
                      <span class="declaration-note">
                        Default implementation
                      </span>
                  </div>
                  <div class="height-container">
                    <div class="pointer-container"></div>
                    <section class="section">
                      <div class="pointer"></div>
                      <div class="abstract">
                        <p>Returns the referencing size of content to render on the list UI.</p>
<div class="aside aside-note">
    <p class="aside-title">Note</p>
    <p>Only <code>CGSize.height</code> is used to determine the size of element
    in <code>UITableView</code>.</p>

</div>

                      </div>
                      <h4>Default Implementation</h4>
                      <div class="default_impl abstract">
                        <p>Returns the referencing size of content to render on the list UI. Returns nil by default.</p>
<div class="aside aside-note">
    <p class="aside-title">Note</p>
    <p>Only <code>CGSize.height</code> is used to determine the size of element
    in <code>UITableView</code>.</p>

</div>

                      </div>
                      <div class="declaration">
                        <h4>Declaration</h4>
                        <div class="language">
                          <p class="aside-title">Swift</p>
                          <pre class="highlight swift"><code><span class="kd">func</span> <span class="nf">referenceSize</span><span class="p">(</span><span class="k">in</span> <span class="nv">bounds</span><span class="p">:</span> <span class="kt">CGRect</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="kt">CGSize</span><span class="p">?</span></code></pre>

                        </div>
                      </div>
                      <div>
                        <h4>Return Value</h4>
                        <p>The referencing size of content to render on the list UI.
       If returns nil, the element of list UI falls back to its default size
       like <code>UITableView.rowHeight</code> or <code>UICollectionViewFlowLayout.itemSize</code>.</p>
                      </div>
                    </section>
                  </div>
                </li>
                <li class="item">
                  <div>
                    <code>
                    <a name="/s:6Carbon9ComponentP19shouldContentUpdate4withSbx_tF"></a>
                    <a name="//apple_ref/swift/Method/shouldContentUpdate(with:)" class="dashAnchor"></a>
                    <a class="token" href="#/s:6Carbon9ComponentP19shouldContentUpdate4withSbx_tF">shouldContentUpdate(with:)</a>
                    </code>
                      <span class="declaration-note">
                        Default implementation
                      </span>
                  </div>
                  <div class="height-container">
                    <div class="pointer-container"></div>
                    <section class="section">
                      <div class="pointer"></div>
                      <div class="abstract">
                        <p>Returns a <code>Bool</code> value indicating whether the content should be reloaded.</p>
<div class="aside aside-note">
    <p class="aside-title">Note</p>
    <p>Unlike <code>Equatable</code>, this doesn&rsquo;t compare whether the two values
    exactly equal. It&rsquo;s can be ignore property comparisons, if not expect
    to reload content.</p>

</div>

                      </div>
                      <h4>Default Implementation</h4>
                      <div class="default_impl abstract">
                        <p>Returns a <code>Bool</code> value indicating whether the content should be reloaded. Default is false.</p>
<div class="aside aside-note">
    <p class="aside-title">Note</p>
    <p>Unlike <code>Equatable</code>, this doesn&rsquo;t compare whether the two values
    exactly equal. It&rsquo;s can be ignore property comparisons, if not expect
    to reload content.</p>

</div>

                      </div>
                      <div class="declaration">
                        <h4>Declaration</h4>
                        <div class="language">
                          <p class="aside-title">Swift</p>
                          <pre class="highlight swift"><code><span class="kd">func</span> <span class="nf">shouldContentUpdate</span><span class="p">(</span><span class="n">with</span> <span class="nv">next</span><span class="p">:</span> <span class="k">Self</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="kt">Bool</span></code></pre>

                        </div>
                      </div>
                      <div>
                        <h4>Return Value</h4>
                        <p>A <code>Bool</code> value indicating whether the content should be reloaded.</p>
                      </div>
                    </section>
                  </div>
                </li>
                <li class="item">
                  <div>
                    <code>
                    <a name="/s:6Carbon9ComponentP12shouldRender4next2inSbx_7ContentQztF"></a>
                    <a name="//apple_ref/swift/Method/shouldRender(next:in:)" class="dashAnchor"></a>
                    <a class="token" href="#/s:6Carbon9ComponentP12shouldRender4next2inSbx_7ContentQztF">shouldRender(next:in:)</a>
                    </code>
                      <span class="declaration-note">
                        Default implementation
                      </span>
                  </div>
                  <div class="height-container">
                    <div class="pointer-container"></div>
                    <section class="section">
                      <div class="pointer"></div>
                      <div class="abstract">
                        <p>Returns a <code>Bool</code> value indicating whether component should be render again.</p>

                      </div>
                      <h4>Default Implementation</h4>
                      <div class="default_impl abstract">
                        <p>Returns a <code>Bool</code> value indicating whether component should be render again.</p>

                      </div>
                      <div class="declaration">
                        <h4>Declaration</h4>
                        <div class="language">
                          <p class="aside-title">Swift</p>
                          <pre class="highlight swift"><code><span class="kd">func</span> <span class="nf">shouldRender</span><span class="p">(</span><span class="nv">next</span><span class="p">:</span> <span class="k">Self</span><span class="p">,</span> <span class="k">in</span> <span class="nv">content</span><span class="p">:</span> <span class="kt"><a href="../Protocols/Component.html#/s:6Carbon9ComponentP7ContentQa">Content</a></span><span class="p">)</span> <span class="o">-&gt;</span> <span class="kt">Bool</span></code></pre>

                        </div>
                      </div>
                      <div>
                        <h4>Parameters</h4>
                        <table class="graybox">
                          <tbody>
                            <tr>
                              <td>
                                <code>
                                <em>next</em>
                                </code>
                              </td>
                              <td>
                                <div>
                                  <p>The next value to be compared to the receiver.</p>
                                </div>
                              </td>
                            </tr>
                            <tr>
                              <td>
                                <code>
                                <em>content</em>
                                </code>
                              </td>
                              <td>
                                <div>
                                  <p>An instance of content laid out on the element.</p>
                                </div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                      <div>
                        <h4>Return Value</h4>
                        <p>A <code>Bool</code> value indicating whether the component should be render again.</p>
                      </div>
                    </section>
                  </div>
                </li>
                <li class="item">
                  <div>
                    <code>
                    <a name="/s:6Carbon9ComponentP6layout7content2iny7ContentQz_So6UIViewCtF"></a>
                    <a name="//apple_ref/swift/Method/layout(content:in:)" class="dashAnchor"></a>
                    <a class="token" href="#/s:6Carbon9ComponentP6layout7content2iny7ContentQz_So6UIViewCtF">layout(content:in:)</a>
                    </code>
                      <span class="declaration-note">
                        Default implementation
                      </span>
                  </div>
                  <div class="height-container">
                    <div class="pointer-container"></div>
                    <section class="section">
                      <div class="pointer"></div>
                      <div class="abstract">
                        <p>Layout the content on top of element of the list UI.</p>
<div class="aside aside-note">
    <p class="aside-title">Note</p>
    <p><code>UIView</code> and <code>UIViewController</code> are laid out with edge constraints by default.</p>

</div>

                      </div>
                      <h4>Default Implementation</h4>
                      <div class="default_impl abstract">
                        <p>Layout the content on top of element of the list UI.</p>

                      </div>
                      <div class="declaration">
                        <h4>Declaration</h4>
                        <div class="language">
                          <p class="aside-title">Swift</p>
                          <pre class="highlight swift"><code><span class="kd">func</span> <span class="nf">layout</span><span class="p">(</span><span class="nv">content</span><span class="p">:</span> <span class="kt"><a href="../Protocols/Component.html#/s:6Carbon9ComponentP7ContentQa">Content</a></span><span class="p">,</span> <span class="k">in</span> <span class="nv">container</span><span class="p">:</span> <span class="kt">UIView</span><span class="p">)</span></code></pre>

                        </div>
                      </div>
                      <div>
                        <h4>Parameters</h4>
                        <table class="graybox">
                          <tbody>
                            <tr>
                              <td>
                                <code>
                                <em>content</em>
                                </code>
                              </td>
                              <td>
                                <div>
                                  <p>An instance of content to be laid out on top of element.</p>
                                </div>
                              </td>
                            </tr>
                            <tr>
                              <td>
                                <code>
                                <em>container</em>
                                </code>
                              </td>
                              <td>
                                <div>
                                  <p>A container view to layout content.</p>
                                </div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </section>
                  </div>
                </li>
                <li class="item">
                  <div>
                    <code>
                    <a name="/s:6Carbon9ComponentP20intrinsicContentSize3forSo6CGSizeV0D0Qz_tF"></a>
                    <a name="//apple_ref/swift/Method/intrinsicContentSize(for:)" class="dashAnchor"></a>
                    <a class="token" href="#/s:6Carbon9ComponentP20intrinsicContentSize3forSo6CGSizeV0D0Qz_tF">intrinsicContentSize(for:)</a>
                    </code>
                      <span class="declaration-note">
                        Default implementation
                      </span>
                  </div>
                  <div class="height-container">
                    <div class="pointer-container"></div>
                    <section class="section">
                      <div class="pointer"></div>
                      <div class="abstract">
                        <p>The natural size for the passed content.</p>

                      </div>
                      <h4>Default Implementation</h4>
                      <div class="default_impl abstract">
                        <p>The natural size for the passed content.</p>

                      </div>
                      <div class="declaration">
                        <h4>Declaration</h4>
                        <div class="language">
                          <p class="aside-title">Swift</p>
                          <pre class="highlight swift"><code><span class="kd">func</span> <span class="nf">intrinsicContentSize</span><span class="p">(</span><span class="k">for</span> <span class="nv">content</span><span class="p">:</span> <span class="kt"><a href="../Protocols/Component.html#/s:6Carbon9ComponentP7ContentQa">Content</a></span><span class="p">)</span> <span class="o">-&gt;</span> <span class="kt">CGSize</span></code></pre>

                        </div>
                      </div>
                      <div>
                        <h4>Return Value</h4>
                        <p>A <code>CGSize</code> value represents a natural size of the passed content.</p>
                      </div>
                    </section>
                  </div>
                </li>
              </ul>
            </div>
            <div class="task-group">
              <div class="task-name-container">
                <a name="/Lifecycle%20-%20optional"></a>
                <a name="//apple_ref/swift/Section/Lifecycle - optional" class="dashAnchor"></a>
                <a href="#/Lifecycle%20-%20optional">
                  <h3 class="section-name">Lifecycle - optional</h3>
                </a>
              </div>
              <ul class="item-container">
                <li class="item">
                  <div>
                    <code>
                    <a name="/s:6Carbon9ComponentP18contentWillDisplayyy7ContentQzF"></a>
                    <a name="//apple_ref/swift/Method/contentWillDisplay(_:)" class="dashAnchor"></a>
                    <a class="token" href="#/s:6Carbon9ComponentP18contentWillDisplayyy7ContentQzF">contentWillDisplay(_:)</a>
                    </code>
                      <span class="declaration-note">
                        Default implementation
                      </span>
                  </div>
                  <div class="height-container">
                    <div class="pointer-container"></div>
                    <section class="section">
                      <div class="pointer"></div>
                      <div class="abstract">
                        <p>Invoked every time of before a component got into visible area.</p>

                      </div>
                      <h4>Default Implementation</h4>
                      <div class="default_impl abstract">
                        <p>Invoked every time of before a component got into visible area.</p>

                      </div>
                      <div class="declaration">
                        <h4>Declaration</h4>
                        <div class="language">
                          <p class="aside-title">Swift</p>
                          <pre class="highlight swift"><code><span class="kd">func</span> <span class="nf">contentWillDisplay</span><span class="p">(</span><span class="n">_</span> <span class="nv">content</span><span class="p">:</span> <span class="kt"><a href="../Protocols/Component.html#/s:6Carbon9ComponentP7ContentQa">Content</a></span><span class="p">)</span></code></pre>

                        </div>
                      </div>
                    </section>
                  </div>
                </li>
                <li class="item">
                  <div>
                    <code>
                    <a name="/s:6Carbon9ComponentP20contentDidEndDisplayyy7ContentQzF"></a>
                    <a name="//apple_ref/swift/Method/contentDidEndDisplay(_:)" class="dashAnchor"></a>
                    <a class="token" href="#/s:6Carbon9ComponentP20contentDidEndDisplayyy7ContentQzF">contentDidEndDisplay(_:)</a>
                    </code>
                      <span class="declaration-note">
                        Default implementation
                      </span>
                  </div>
                  <div class="height-container">
                    <div class="pointer-container"></div>
                    <section class="section">
                      <div class="pointer"></div>
                      <div class="abstract">
                        <p>Invoked every time of after a component went out from visible area.</p>

                      </div>
                      <h4>Default Implementation</h4>
                      <div class="default_impl abstract">
                        <p>Invoked every time of after a component went out from visible area.</p>

                      </div>
                      <div class="declaration">
                        <h4>Declaration</h4>
                        <div class="language">
                          <p class="aside-title">Swift</p>
                          <pre class="highlight swift"><code><span class="kd">func</span> <span class="nf">contentDidEndDisplay</span><span class="p">(</span><span class="n">_</span> <span class="nv">content</span><span class="p">:</span> <span class="kt"><a href="../Protocols/Component.html#/s:6Carbon9ComponentP7ContentQa">Content</a></span><span class="p">)</span></code></pre>

                        </div>
                      </div>
                    </section>
                  </div>
                </li>
              </ul>
            </div>
            <div class="task-group">
              <ul class="item-container">
                <li class="item">
                  <div>
                    <code>
                    <a name="/s:6Carbon9ComponentPAAE10identified2byAA010IdentifiedB7WrapperVyqd__xGqd___tSHRd__lF"></a>
                    <a name="//apple_ref/swift/Method/identified(by:)" class="dashAnchor"></a>
                    <a class="token" href="#/s:6Carbon9ComponentPAAE10identified2byAA010IdentifiedB7WrapperVyqd__xGqd___tSHRd__lF">identified(by:)</a>
                    </code>
                      <span class="declaration-note">
                        Extension method
                      </span>
                  </div>
                  <div class="height-container">
                    <div class="pointer-container"></div>
                    <section class="section">
                      <div class="pointer"></div>
                      <div class="abstract">
                        <p>Returns an identified component wrapping <code>self</code> and given <code>id</code>.</p>

                      </div>
                      <div class="declaration">
                        <h4>Declaration</h4>
                        <div class="language">
                          <p class="aside-title">Swift</p>
                          <pre class="highlight swift"><code><span class="kd">@inlinable</span>
<span class="kd">func</span> <span class="n">identified</span><span class="o">&lt;</span><span class="kt">ID</span><span class="o">&gt;</span><span class="p">(</span><span class="n">by</span> <span class="nv">id</span><span class="p">:</span> <span class="kt">ID</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="kt"><a href="../Structs/IdentifiedComponentWrapper.html">IdentifiedComponentWrapper</a></span><span class="o">&lt;</span><span class="kt">ID</span><span class="p">,</span> <span class="k">Self</span><span class="o">&gt;</span> <span class="k">where</span> <span class="kt">ID</span> <span class="p">:</span> <span class="kt">Hashable</span></code></pre>

                        </div>
                      </div>
                      <div>
                        <h4>Return Value</h4>
                        <p>An identified component wrapping <code>self</code> and given <code>id</code>.</p>
                      </div>
                    </section>
                  </div>
                </li>
                <li class="item">
                  <div>
                    <code>
                    <a name="/s:6Carbon9ComponentPAAE10identified2byAA010IdentifiedB7WrapperVyqd__xGs7KeyPathCyxqd__G_tSHRd__lF"></a>
                    <a name="//apple_ref/swift/Method/identified(by:)" class="dashAnchor"></a>
                    <a class="token" href="#/s:6Carbon9ComponentPAAE10identified2byAA010IdentifiedB7WrapperVyqd__xGs7KeyPathCyxqd__G_tSHRd__lF">identified(by:)</a>
                    </code>
                      <span class="declaration-note">
                        Extension method
                      </span>
                  </div>
                  <div class="height-container">
                    <div class="pointer-container"></div>
                    <section class="section">
                      <div class="pointer"></div>
                      <div class="abstract">
                        <p>Returns an identified component wrapping <code>self</code> and the <code>id</code> that accessed by given key path.</p>

                      </div>
                      <div class="declaration">
                        <h4>Declaration</h4>
                        <div class="language">
                          <p class="aside-title">Swift</p>
                          <pre class="highlight swift"><code><span class="kd">@inlinable</span>
<span class="kd">func</span> <span class="n">identified</span><span class="o">&lt;</span><span class="kt">ID</span><span class="o">&gt;</span><span class="p">(</span><span class="n">by</span> <span class="nv">keyPath</span><span class="p">:</span> <span class="kt">KeyPath</span><span class="o">&lt;</span><span class="k">Self</span><span class="p">,</span> <span class="kt">ID</span><span class="o">&gt;</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="kt"><a href="../Structs/IdentifiedComponentWrapper.html">IdentifiedComponentWrapper</a></span><span class="o">&lt;</span><span class="kt">ID</span><span class="p">,</span> <span class="k">Self</span><span class="o">&gt;</span> <span class="k">where</span> <span class="kt">ID</span> <span class="p">:</span> <span class="kt">Hashable</span></code></pre>

                        </div>
                      </div>
                      <div>
                        <h4>Return Value</h4>
                        <p>An identified component wrapping <code>self</code> and the <code>id</code> that accessed by given key path.</p>
                      </div>
                    </section>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </section>

      </article>
    </div>
    <section class="footer">
      <p>&copy; 2019 <a class="link" href="https://github.com/ra1028" target="_blank" rel="external">Ryo Aoyama</a>. All rights reserved. (Last updated: 2019-10-29)</p>
      <p>Generated by <a class="link" href="https://github.com/realm/jazzy" target="_blank" rel="external">jazzy ♪♫ v0.10.0</a>, a <a class="link" href="https://realm.io" target="_blank" rel="external">Realm</a> project.</p>
    </section>
  </body>
</div>
</html>
